<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>TV浏览器 SVG图标预览</title>
    <style>
        body {
            font-family: 'Microsoft YaHei', Arial, sans-serif;
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            margin: 0;
            padding: 20px;
            color: #333;
        }
        
        .container {
            max-width: 1200px;
            margin: 0 auto;
            background: rgba(255, 255, 255, 0.95);
            border-radius: 16px;
            padding: 30px;
            box-shadow: 0 15px 35px rgba(0, 0, 0, 0.1);
        }
        
        h1 {
            text-align: center;
            color: #2c3e50;
            margin-bottom: 40px;
            font-size: 2.5em;
        }
        
        .icons-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
            gap: 30px;
            margin-bottom: 40px;
        }
        
        .icon-card {
            background: white;
            border-radius: 12px;
            padding: 25px;
            text-align: center;
            box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1);
            border: 2px solid #f1f1f1;
        }
        
        .icon-name {
            font-size: 1.4em;
            font-weight: 600;
            color: #2c3e50;
            margin-bottom: 20px;
        }
        
        .icon-display {
            margin: 20px 0;
            display: flex;
            justify-content: space-around;
            align-items: center;
        }
        
        .icon-size {
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 8px;
        }
        
        .icon-label {
            font-size: 12px;
            color: #666;
            font-weight: 500;
        }
        
        .icon-desc {
            color: #7f8c8d;
            font-size: 0.9em;
            line-height: 1.4;
            margin-top: 15px;
        }
        
        .size-32 { width: 32px; height: 32px; }
        .size-48 { width: 48px; height: 48px; }
        .size-64 { width: 64px; height: 64px; }
        
        svg {
            color: #3498db;
        }
    </style>
</head>
<body>
    <div class="container">
        <h1>🌐 TV浏览器 SVG图标预览</h1>
        
        <div class="icons-grid">
            <!-- 主页图标 -->
            <div class="icon-card">
                <div class="icon-name">🏠 主页 (Home)</div>
                <div class="icon-display">
                    <div class="icon-size">
                        <svg class="size-32" viewBox="0 0 24 24" fill="none">
                            <path d="M12 2L2 12H5V21H10V16H14V21H19V12H22L12 2Z" fill="currentColor" stroke="currentColor" stroke-width="1"/>
                            <rect x="11" y="17" width="2" height="4" fill="white"/>
                        </svg>
                        <div class="icon-label">32px</div>
                    </div>
                    <div class="icon-size">
                        <svg class="size-48" viewBox="0 0 24 24" fill="none">
                            <path d="M12 2L2 12H5V21H10V16H14V21H19V12H22L12 2Z" fill="currentColor" stroke="currentColor" stroke-width="1"/>
                            <rect x="11" y="17" width="2" height="4" fill="white"/>
                        </svg>
                        <div class="icon-label">48px</div>
                    </div>
                    <div class="icon-size">
                        <svg class="size-64" viewBox="0 0 24 24" fill="none">
                            <path d="M12 2L2 12H5V21H10V16H14V21H19V12H22L12 2Z" fill="currentColor" stroke="currentColor" stroke-width="1"/>
                            <rect x="11" y="17" width="2" height="4" fill="white"/>
                        </svg>
                        <div class="icon-label">64px</div>
                    </div>
                </div>
                <div class="icon-desc">房屋形状，用于返回主页功能</div>
            </div>

            <!-- 搜索图标 -->
            <div class="icon-card">
                <div class="icon-name">🔍 搜索 (Search)</div>
                <div class="icon-display">
                    <div class="icon-size">
                        <svg class="size-32" viewBox="0 0 24 24" fill="none">
                            <circle cx="11" cy="11" r="8" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round"/>
                            <line x1="21" y1="21" x2="16.65" y2="16.65" stroke="currentColor" stroke-width="2.5" stroke-linecap="round"/>
                        </svg>
                        <div class="icon-label">32px</div>
                    </div>
                    <div class="icon-size">
                        <svg class="size-48" viewBox="0 0 24 24" fill="none">
                            <circle cx="11" cy="11" r="8" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round"/>
                            <line x1="21" y1="21" x2="16.65" y2="16.65" stroke="currentColor" stroke-width="2.5" stroke-linecap="round"/>
                        </svg>
                        <div class="icon-label">48px</div>
                    </div>
                    <div class="icon-size">
                        <svg class="size-64" viewBox="0 0 24 24" fill="none">
                            <circle cx="11" cy="11" r="8" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round"/>
                            <line x1="21" y1="21" x2="16.65" y2="16.65" stroke="currentColor" stroke-width="2.5" stroke-linecap="round"/>
                        </svg>
                        <div class="icon-label">64px</div>
                    </div>
                </div>
                <div class="icon-desc">放大镜形状，用于搜索网页内容</div>
            </div>

            <!-- URL图标 -->
            <div class="icon-card">
                <div class="icon-name">🔗 网址 (URL)</div>
                <div class="icon-display">
                    <div class="icon-size">
                        <svg class="size-32" viewBox="0 0 24 24" fill="none">
                            <path d="M15 7H20C21.1046 7 22 7.89543 22 9V15C22 16.1046 21.1046 17 20 17H15" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round"/>
                            <path d="M9 17H4C2.89543 17 2 16.1046 2 15V9C2 7.89543 2.89543 7 4 7H9" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round"/>
                            <line x1="8" y1="12" x2="16" y2="12" stroke="currentColor" stroke-width="2.5" stroke-linecap="round"/>
                        </svg>
                        <div class="icon-label">32px</div>
                    </div>
                    <div class="icon-size">
                        <svg class="size-48" viewBox="0 0 24 24" fill="none">
                            <path d="M15 7H20C21.1046 7 22 7.89543 22 9V15C22 16.1046 21.1046 17 20 17H15" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round"/>
                            <path d="M9 17H4C2.89543 17 2 16.1046 2 15V9C2 7.89543 2.89543 7 4 7H9" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round"/>
                            <line x1="8" y1="12" x2="16" y2="12" stroke="currentColor" stroke-width="2.5" stroke-linecap="round"/>
                        </svg>
                        <div class="icon-label">48px</div>
                    </div>
                    <div class="icon-size">
                        <svg class="size-64" viewBox="0 0 24 24" fill="none">
                            <path d="M15 7H20C21.1046 7 22 7.89543 22 9V15C22 16.1046 21.1046 17 20 17H15" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round"/>
                            <path d="M9 17H4C2.89543 17 2 16.1046 2 15V9C2 7.89543 2.89543 7 4 7H9" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round"/>
                            <line x1="8" y1="12" x2="16" y2="12" stroke="currentColor" stroke-width="2.5" stroke-linecap="round"/>
                        </svg>
                        <div class="icon-label">64px</div>
                    </div>
                </div>
                <div class="icon-desc">链条形状，表示输入或打开URL链接</div>
            </div>

            <!-- 收藏图标 -->
            <div class="icon-card">
                <div class="icon-name">📑 收藏 (Bookmark)</div>
                <div class="icon-display">
                    <div class="icon-size">
                        <svg class="size-32" viewBox="0 0 24 24" fill="none">
                            <path d="M6 3C5.44772 3 5 3.44772 5 4V21L12 18L19 21V4C19 3.44772 18.5523 3 18 3H6Z" fill="currentColor" stroke="currentColor" stroke-width="1.5"/>
                            <line x1="8" y1="7" x2="16" y2="7" stroke="white" stroke-width="1.5" stroke-linecap="round"/>
                            <line x1="8" y1="10" x2="14" y2="10" stroke="white" stroke-width="1.5" stroke-linecap="round"/>
                        </svg>
                        <div class="icon-label">32px</div>
                    </div>
                    <div class="icon-size">
                        <svg class="size-48" viewBox="0 0 24 24" fill="none">
                            <path d="M6 3C5.44772 3 5 3.44772 5 4V21L12 18L19 21V4C19 3.44772 18.5523 3 18 3H6Z" fill="currentColor" stroke="currentColor" stroke-width="1.5"/>
                            <line x1="8" y1="7" x2="16" y2="7" stroke="white" stroke-width="1.5" stroke-linecap="round"/>
                            <line x1="8" y1="10" x2="14" y2="10" stroke="white" stroke-width="1.5" stroke-linecap="round"/>
                        </svg>
                        <div class="icon-label">48px</div>
                    </div>
                    <div class="icon-size">
                        <svg class="size-64" viewBox="0 0 24 24" fill="none">
                            <path d="M6 3C5.44772 3 5 3.44772 5 4V21L12 18L19 21V4C19 3.44772 18.5523 3 18 3H6Z" fill="currentColor" stroke="currentColor" stroke-width="1.5"/>
                            <line x1="8" y1="7" x2="16" y2="7" stroke="white" stroke-width="1.5" stroke-linecap="round"/>
                            <line x1="8" y1="10" x2="14" y2="10" stroke="white" stroke-width="1.5" stroke-linecap="round"/>
                        </svg>
                        <div class="icon-label">64px</div>
                    </div>
                </div>
                <div class="icon-desc">书签形状，用于收藏和管理网站</div>
            </div>

            <!-- 浏览器图标 -->
            <div class="icon-card">
                <div class="icon-name">🌐 浏览器 (Browser)</div>
                <div class="icon-display">
                    <div class="icon-size">
                        <svg class="size-32" viewBox="0 0 24 24" fill="none">
                            <circle cx="12" cy="12" r="10" fill="none" stroke="currentColor" stroke-width="2"/>
                            <ellipse cx="12" cy="12" rx="5" ry="10" fill="none" stroke="currentColor" stroke-width="1.5"/>
                            <ellipse cx="12" cy="12" rx="10" ry="5" fill="none" stroke="currentColor" stroke-width="1.5"/>
                            <line x1="2" y1="12" x2="22" y2="12" stroke="currentColor" stroke-width="1.5"/>
                            <line x1="12" y1="2" x2="12" y2="22" stroke="currentColor" stroke-width="1.5"/>
                            <circle cx="12" cy="12" r="2" fill="currentColor"/>
                        </svg>
                        <div class="icon-label">32px</div>
                    </div>
                    <div class="icon-size">
                        <svg class="size-48" viewBox="0 0 24 24" fill="none">
                            <circle cx="12" cy="12" r="10" fill="none" stroke="currentColor" stroke-width="2"/>
                            <ellipse cx="12" cy="12" rx="5" ry="10" fill="none" stroke="currentColor" stroke-width="1.5"/>
                            <ellipse cx="12" cy="12" rx="10" ry="5" fill="none" stroke="currentColor" stroke-width="1.5"/>
                            <line x1="2" y1="12" x2="22" y2="12" stroke="currentColor" stroke-width="1.5"/>
                            <line x1="12" y1="2" x2="12" y2="22" stroke="currentColor" stroke-width="1.5"/>
                            <circle cx="12" cy="12" r="2" fill="currentColor"/>
                        </svg>
                        <div class="icon-label">48px</div>
                    </div>
                    <div class="icon-size">
                        <svg class="size-64" viewBox="0 0 24 24" fill="none">
                            <circle cx="12" cy="12" r="10" fill="none" stroke="currentColor" stroke-width="2"/>
                            <ellipse cx="12" cy="12" rx="5" ry="10" fill="none" stroke="currentColor" stroke-width="1.5"/>
                            <ellipse cx="12" cy="12" rx="10" ry="5" fill="none" stroke="currentColor" stroke-width="1.5"/>
                            <line x1="2" y1="12" x2="22" y2="12" stroke="currentColor" stroke-width="1.5"/>
                            <line x1="12" y1="2" x2="12" y2="22" stroke="currentColor" stroke-width="1.5"/>
                            <circle cx="12" cy="12" r="2" fill="currentColor"/>
                        </svg>
                        <div class="icon-label">64px</div>
                    </div>
                </div>
                <div class="icon-desc">地球网络形状，作为应用主图标</div>
            </div>

            <!-- 设置图标 -->
            <div class="icon-card">
                <div class="icon-name">⚙️ 设置 (Settings)</div>
                <div class="icon-display">
                    <div class="icon-size">
                        <svg class="size-32" viewBox="0 0 24 24" fill="none">
                            <path d="M12.0049 2C12.7749 2 13.4149 2.56 13.4849 3.32L13.7649 5.79C14.1749 5.96 14.5649 6.18 14.9249 6.44L17.1249 5.36C17.8249 5.01 18.6749 5.26 19.0349 5.95L20.0349 7.61C20.3949 8.3 20.1649 9.14 19.4949 9.52L17.5849 10.67C17.6249 11.11 17.6249 11.56 17.5849 12L19.4949 13.15C20.1649 13.53 20.3949 14.37 20.0349 15.06L19.0349 16.72C18.6749 17.41 17.8249 17.66 17.1249 17.31L14.9249 16.23C14.5649 16.49 14.1749 16.71 13.7649 16.88L13.4849 19.35C13.4149 20.11 12.7749 20.67 12.0049 20.67C11.2349 20.67 10.5949 20.11 10.5249 19.35L10.2449 16.88C9.8349 16.71 9.4449 16.49 9.0849 16.23L6.8849 17.31C6.1849 17.66 5.3349 17.41 4.9749 16.72L3.9749 15.06C3.6149 14.37 3.8449 13.53 4.5149 13.15L6.4249 12C6.3849 11.56 6.3849 11.11 6.4249 10.67L4.5149 9.52C3.8449 9.14 3.6149 8.3 3.9749 7.61L4.9749 5.95C5.3349 5.26 6.1849 5.01 6.8849 5.36L9.0849 6.44C9.4449 6.18 9.8349 5.96 10.2449 5.79L10.5249 3.32C10.5949 2.56 11.2349 2 12.0049 2Z" fill="currentColor"/>
                            <circle cx="12" cy="12" r="3" fill="white" stroke="currentColor" stroke-width="1"/>
                        </svg>
                        <div class="icon-label">32px</div>
                    </div>
                    <div class="icon-size">
                        <svg class="size-48" viewBox="0 0 24 24" fill="none">
                            <path d="M12.0049 2C12.7749 2 13.4149 2.56 13.4849 3.32L13.7649 5.79C14.1749 5.96 14.5649 6.18 14.9249 6.44L17.1249 5.36C17.8249 5.01 18.6749 5.26 19.0349 5.95L20.0349 7.61C20.3949 8.3 20.1649 9.14 19.4949 9.52L17.5849 10.67C17.6249 11.11 17.6249 11.56 17.5849 12L19.4949 13.15C20.1649 13.53 20.3949 14.37 20.0349 15.06L19.0349 16.72C18.6749 17.41 17.8249 17.66 17.1249 17.31L14.9249 16.23C14.5649 16.49 14.1749 16.71 13.7649 16.88L13.4849 19.35C13.4149 20.11 12.7749 20.67 12.0049 20.67C11.2349 20.67 10.5949 20.11 10.5249 19.35L10.2449 16.88C9.8349 16.71 9.4449 16.49 9.0849 16.23L6.8849 17.31C6.1849 17.66 5.3349 17.41 4.9749 16.72L3.9749 15.06C3.6149 14.37 3.8449 13.53 4.5149 13.15L6.4249 12C6.3849 11.56 6.3849 11.11 6.4249 10.67L4.5149 9.52C3.8449 9.14 3.6149 8.3 3.9749 7.61L4.9749 5.95C5.3349 5.26 6.1849 5.01 6.8849 5.36L9.0849 6.44C9.4449 6.18 9.8349 5.96 10.2449 5.79L10.5249 3.32C10.5949 2.56 11.2349 2 12.0049 2Z" fill="currentColor"/>
                            <circle cx="12" cy="12" r="3" fill="white" stroke="currentColor" stroke-width="1"/>
                        </svg>
                        <div class="icon-label">48px</div>
                    </div>
                    <div class="icon-size">
                        <svg class="size-64" viewBox="0 0 24 24" fill="none">
                            <path d="M12.0049 2C12.7749 2 13.4149 2.56 13.4849 3.32L13.7649 5.79C14.1749 5.96 14.5649 6.18 14.9249 6.44L17.1249 5.36C17.8249 5.01 18.6749 5.26 19.0349 5.95L20.0349 7.61C20.3949 8.3 20.1649 9.14 19.4949 9.52L17.5849 10.67C17.6249 11.11 17.6249 11.56 17.5849 12L19.4949 13.15C20.1649 13.53 20.3949 14.37 20.0349 15.06L19.0349 16.72C18.6749 17.41 17.8249 17.66 17.1249 17.31L14.9249 16.23C14.5649 16.49 14.1749 16.71 13.7649 16.88L13.4849 19.35C13.4149 20.11 12.7749 20.67 12.0049 20.67C11.2349 20.67 10.5949 20.11 10.5249 19.35L10.2449 16.88C9.8349 16.71 9.4449 16.49 9.0849 16.23L6.8849 17.31C6.1849 17.66 5.3349 17.41 4.9749 16.72L3.9749 15.06C3.6149 14.37 3.8449 13.53 4.5149 13.15L6.4249 12C6.3849 11.56 6.3849 11.11 6.4249 10.67L4.5149 9.52C3.8449 9.14 3.6149 8.3 3.9749 7.61L4.9749 5.95C5.3349 5.26 6.1849 5.01 6.8849 5.36L9.0849 6.44C9.4449 6.18 9.8349 5.96 10.2449 5.79L10.5249 3.32C10.5949 2.56 11.2349 2 12.0049 2Z" fill="currentColor"/>
                            <circle cx="12" cy="12" r="3" fill="white" stroke="currentColor" stroke-width="1"/>
                        </svg>
                        <div class="icon-label">64px</div>
                    </div>
                </div>
                <div class="icon-desc">齿轮形状，用于浏览器设置页面</div>
            </div>
        </div>
        
        <div style="text-align: center; color: #7f8c8d; margin-top: 30px;">
            <p><strong>使用说明：</strong>在浏览器中打开此HTML文件即可查看所有SVG图标的实际渲染效果</p>
            <p><strong>特点：</strong>适合TV界面的粗线条设计 | 支持多种尺寸 | 高对比度显示</p>
        </div>
    </div>
</body>
</html> 